<template>
	<div class="main">
		<div class="search-add">
			<div class="search-box">
				<el-input
				placeholder="患者姓名或就诊卡号或病例号"
				v-model='searchValue'
				icon="search"
				@change='handleChange'
				:on-icon-click="handleIconClick">
				</el-input>
				<span @click='$refs.highsearch.show()' class="high-select">高级筛选</span>
			</div>
				<highsearch ref='highsearch' @formData='getForm' @reset='clear'>				
				</highsearch>
			<div class="add-box">
				<el-button type="primary" @click='toAddpatient'>新增患者</el-button>
			</div>
		</div>
		<div class="select-box">
		<div class="selcet-list" v-show='selectArray.length>0'>
			<span>已筛选:</span>
			<ul class="list">
				<li v-for='item in selectArray'>
				{{item.label}} : {{item.value}}
				</span>
				</li>
				<span class="clear" @click='clear'>清空</span>
			</ul>	
		</div>
		</div>	
		<div class="table-list">
			<div class="list-box">
				<el-table
				:data='tableData'
				stripe
				style="width: 100%"
				v-loading.body="loading"

				>
				<el-table-column
				label="患者姓名"
				prop='name'
				align='center'
				>
				</el-table-column>
				<el-table-column
				label="基本信息"
				prop='base'
				width='200px'
				align='center'
				>
				</el-table-column>
				<el-table-column
				label="原发病"
				prop='disease'
				align='center'
				>
				</el-table-column>
				<el-table-column
				label="血型"
				prop='blood'
				align='center'
				>
				</el-table-column>
				<el-table-column
				label="未查项目"
				prop='noProject'
				align='center'
				>
				</el-table-column>
				<el-table-column
				label="联系方式"
				width='150px'
				prop='phone'
				align='center'
				>
				</el-table-column>
				<el-table-column
				label="PRA"
				prop='PRA'
				align='center'
				>
				</el-table-column>
				<el-table-column label="操作">
					<template scope="scope">
						<router-link class="click-detalis" 
						to='/patientDetails' @click.native='toAddpatient(scope.$index, scope.row)' target='_blank'>详情</router-link>
					</template>
				</el-table-column>
				</el-table>
				<div class="pagination-content">
					<v-pagination 
					:total='100' 
					:page-size='10' 
					@change='pageChange'
					>				
				</v-pagination>
			</div>	
		</div>
	</div>
</div>
</template>
<script>
import highsearch from '@/views/waitPort/children/highsearch'
import pagination from '@/components/pagination'
import {waitport,search} from '@/config/api'
	export default {
		data() {
			return {
				tableData: [],
				loading: true,
				searchValue:'',
				total:100,
				selectArray:[]	
			}
		},
		computed: {

		},
		created() {
			this._initData();
		},
		methods: {
			clear(){
				this.selectArray=[];
			},
			async _initData() {
				await waitport().then((res)=>{
					if(res.status == 200){
						this.tableData=res.data.array;
						console.log(res);
						this.loading =false;
						this.doData();
					}	
				})
			},
			doData(){
				for(var i=0; i<this.tableData.length; i++){
					var base = `${this.tableData[i].sex}/${this.tableData[i].age}岁/${this.tableData[i].height}cm/${this.tableData[i].weight}kg`;
					this.tableData[i].base = base
				}
			},
			handleIconClick() {	
				this.loading=true;			
				if(this.searchValue){			
					search({value:this.searchValue}).then((res)=>{
						if(res.status == 200){
							this.tableData=res.data.array;
							this.total = res.data.array.length;
							this.loading =false;
						}	
					})
				}else{
					this._initData();
					this.total =100;
				}			
			},
			handleChange(){
				if(!this.searchValue){
					this.loading=true;
					this._initData();
					this.total =100;
				}
			},
			pageChange(val) {
				this.loading=true;
				this._initData();
			},
			getForm(data) {
				var temp=[];
				var giveData={};
				for(var key in data){
					if(data[key].value){
						temp.push(data[key]);
						giveData[key] = data[key].value
					}	
				}
				console.log(giveData)
				this.selectArray = temp;
				console.log(this.selectArray);
			},
			toAddpatient(index,row) {
				
			}
		},
		components: {
			highsearch,
			'v-pagination':pagination
		}
	}
</script>
<style lang='scss' rel='stylesheet/scss' scoped>
@import '../../../assets/css/iconfont.css';
.main{
	.search-add{
		display: flex;
		justify-content: space-between;
		vertical-align: top;
		.add-box{
			font-size: 14px;
			width: 120px;
			button{
				width: 100%;
			}
		}
		.search-box{
			width: 640px;
			display: flex;
			.el-input__icon{
				font-size:20px;
			}
			.high-select{
				display: inline-block;
				width: 60px;
				cursor: pointer;
				margin-left: 10px;
				line-height: 36px;
				font-size: 12px;
				color: #06aea6;
			}	
		}
	}
	.pagination-content{
		overflow: hidden;
		margin: 15px;
		.pagination{
			float: right;
		}
	}
	.list-box{
		.click-detalis{
			color:#3f8de1;
			cursor: pointer;
		}
	}
	.select-box{
		padding:10px 0;
		min-height: 32px;
		.selcet-list{
			display: flex;
			.clear{
				color: #3f8de1;
    			cursor: pointer;
    			margin-left: 5px;
			}
			span{
				display: inline-block;
				width: 50px;
				line-height: 28px;
				font-size: 12px;
				color: #666666;
			}
			.list{
				li{
					box-sizing: border-box;
					float: left;
					font-size: 12px;
					color: #666666;
					line-height: 22px;
					padding: 2px 10px;
					border: 1px solid #999999;
					background-color: #ffffff;
					border-radius: 3px;
					margin: 2px 5px;
				}
			}
		}
	}
}
</style>
